<template>
  <div>
    <my-header backBtn>
      <div slot="title">
        轨迹查询
      </div>

    </my-header>
    <baidu-map class="bm-view"
               :style="'height:'+height+'px' "
               :zoom="zoom"
               @ready="handlerMap"
               :center="center"
               :scroll-wheel-zoom="true"
               ak="wpjzuT9FyGlqzF9ZeolLwmWZXRz2XZst">
               <!-- <bm-marker :top="true"
                          :icon="{url:'static/img/point.png',size:{height:60,width: 60}}"
                          :position="center"
                          animation="BMAP_ANIMATION_BOUNCE">
               </bm-marker>
               <bm-marker :top="true"
                          :icon="{url:'static/img/point.png',size:{height:60,width: 60}}"
                          :position="center2"
                          animation="BMAP_ANIMATION_BOUNCE">
               </bm-marker>
 -->
                <bm-polyline
                        :path="polylinePath"
                        stroke-color="blue"
                        :stroke-opacity="1.5"
                        :stroke-weight="5"></bm-polyline>

    </baidu-map>
    <!-- 底部菜单-->
    <div style="width: 100%;text-align: left;">
      <div style="width: 100%;text-align: left;">
        <div style="padding: 10px;line-height: 30px;">
            <div class="search-cell flex">
              <div class="search-item">日期</div>
              <div class="search-box">
                <input
                  class="search-input"
                  type="date"
                  v-model="params2.day"
                  @change="queryFn"
                />
              </div>
            </div>
          </div>

        </div>
    </div>

    </div>


  </div>

</template>
<script>
  import {BaiduMap, BmMarker, BmControl, BmPolyline} from 'vue-baidu-map'
  import wx from "weixin-js-sdk";
  import Axios from 'axios/index'
  import Cookies from 'js-cookie';

  export default {
    components: {
      BaiduMap,
      BmMarker,
      BmControl,
      BmPolyline
    },
    prop: {
      height: {
        type: String,
        default: '300'
      }
    },
    data() {
      let time = this.$getNowDate("date");
      return {
        zoom: 18,
        student_id: '',
        height: document.body.clientHeight - 120,
        width: document.body.clientWidth,
        center: '',
        map:null,
        BMap:null,
        params2: {
          studentId:'',
          day: time
        },
        polylinePath: []
      }
    },
    methods: {
      queryFn() {
        //this.$weui.topTips(this.params2.studentId);
        //this.params2.day = '2020-03-06';
        //this.$weui.topTips(this.params2.day);
        this.$http.fetchGpsLists(this.params2).then(resp => {
          let data = resp.data;
          this.center = data[data.length/2];
          this.polylinePath = data;
          //this.$weui.topTips(data.size.toString());
          // if(data[0] === null){
          //   this.$weui.topTips("暂无数据");
          // } else {

          // }
        }).catch(resp => {
          this.$weui.topTips("暂无数据");
        })

      },
      handlerMap({BMap, map}) {
        this.map = map;
        this.BMap = BMap;
        //添加空间
        this.addControl();
      },
      addControl(){
        // 添加比例尺控件
        let scaleCtrl = new BMap.ScaleControl();
        // 添加比例尺控件
        this.map.addControl(scaleCtrl);
      }
    },
    mounted() {
      let data = this.$route.query;
      this.student_id = data.id;
      this.params2.studentId = data.id;
      this.center = {lng:data.lng, lat:data.lat};
      this.queryFn();
    },
    created() {
    }
  }
</script>
<style scoped>
  .bm-view {
    width: 100%;
    height: 300px;
  }



</style>
